import React, { Component } from 'react';
import { Donut } from '@ant-design/charts';
import { query } from '../../utils/utils';

import { Layout, Breadcrumb,Card } from 'antd';
const { Content } = Layout;

const data = [
  {
    type: '分类一',
    value: 27,
  },
  {
    type: '分类二',
    value: 25,
  },
  {
    type: '分类三',
    value: 18,
  },
  {
    type: '分类四',
    value: 15,
  },
  {
    type: '分类五',
    value: 10,
  },
  {
    type: '其它',
    value: 5,
  },
];

class Pie extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        forceFit: true,
        title: {
          visible: true,
          text: '月度销售业绩统计',
        },
        radius: 0.8,
        padding: 'auto',
        angleField: 'value',
        colorField: 'type',
        statistic: { visible: true },
        data: []
      }
    }
  }
  render() {
    return (
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>管理中心</Breadcrumb.Item>
          <Breadcrumb.Item>数据统计</Breadcrumb.Item>
          <Breadcrumb.Item>饼状图</Breadcrumb.Item>
        </Breadcrumb>
        <Content 
         className="site-layout-background"
         style={{
           padding: 24,
           margin: 0,
           minHeight: 280,
         }}
        >
          <Donut {...this.state.config} />
        </Content>
      </div>
    );
  }

  componentWillMount() {
    this.getData();
  }

  getData() {
    query(`/index.php?c=charts&a=index`).then(res => {
      if (res.errcode == 0) {
        const data = [];
        res.data.forEach((item, index) => {
          data.push({
            type: ++index + '月',
            value: parseFloat(item.total)
          });
        });
        this.setState({
          config: {
            ...this.state.config,
            data
          }
        });
      }
    });
  }
}

export default Pie;
